<template>
    <d2-container :filename="filename">
        <template slot="header">
            <el-form :inline="true" size="mini">
                <el-button type="primary" size="mini" @click="add" icon="el-icon-circle-plus-outline">新增</el-button>
                <el-input size="mini" v-model="queryParam.name" placeholder="名称或编码"
                          style="width: 100px;margin-left: 10px;"/>
                <el-button size="mini" title="刷新" @click="getList" icon="el-icon-refresh" circle
                           style="margin-left: 5px;"></el-button>
            </el-form>
        </template>
        <el-table v-loading="listLoading" :data="payChannelData" border>
            <el-table-column label="标题" width="180" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column label="运营方编号"  align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.provider_id}}</span>
                </template>
            </el-table-column>
            <el-table-column label="支付名称" width="150" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column label="图标名称" width="180" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.icon}}</span>
                </template>
            </el-table-column>
            <el-table-column label="Bean名称" width="180" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.bean_service_name}}</span>
                </template>
            </el-table-column>
            <el-table-column label="是否可用" width="180" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.enabled}}</span>
                </template>
            </el-table-column>
            <el-table-column label="排序值" width="80" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.sorted}}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="180" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.create_time}}</span>
                </template>
            </el-table-column>
            <el-table-column label="支付编码" width="180" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.code}}</span>
                </template>
            </el-table-column>
            <el-table-column label="描述" width="180" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.description}}</span>
                </template>
            </el-table-column>
            <el-table-column label="上一个编码" width="180" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.pre_code}}</span>
                </template>
            </el-table-column>
            <el-table-column label="失效时间" width="180" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.code_expire_time}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" min-width="150px" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" plain icon="el-icon-edit"
                               @click="edit(scope.row)"
                               type="success">编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <data-form ref="dataForm"></data-form>
        <template slot="footer">
            <pagination v-show="total>0"
                        :total="total"
                        :page.sync="queryParam.current"
                        :limit.sync="queryParam.size"
                        @pagination="getList"/>
        </template>

    </d2-container>
</template>

<script>
  import { fetchList } from '@/api/trade/pay-channel'
  import Pagination from '@/components/Pagination'
  import DataForm from './components/DataForm'

  const defaultPayChannel = {
    id: undefined,
    provider_id: undefined,
    name: undefined,
    icon: undefined,
    bean_service_name: undefined,
    enabled: undefined,
    sorted: undefined,
    create_time: undefined,
    code: undefined,
    description: undefined,
    pre_code: undefined,
    code_expire_time: undefined
  }

  export default {
    name: 'trade-pay-channel',
    components: {
      DataForm,
      Pagination
    },
    data () {
      return {
        filename: __filename,
        listLoading: false,
        payChannelData: [],
        total: 0,
        queryParam: {
          current: 1,
          size: 10
        }
      }
    },
    created () {
      this.getList()
    },
    methods: {
      getList () {
        this.listLoading = true
        fetchList(this.queryParam).then(res => {
          this.total = parseInt(res.total)
          this.payChannelData = res.records
          this.listLoading = false
        }).catch(() => {
          this.listLoading = false
        })
      },
      add () {
        this.$refs.dataForm.open('create', {})
      },
      edit (row) {
        this.$refs.dataForm.open('update', row)
      }
    }
  }
</script>
